<script setup lang="ts">
import { ref } from "vue";
import { tableData } from "./data";

type TableLayout = "fixed" | "auto";

const tableLayout = ref<TableLayout>("fixed");

const columns: TableColumnList = [
  {
    label: "日期",
    prop: "date"
  },
  {
    label: "姓名",
    prop: "name"
  },
  {
    label: "地址",
    prop: "address"
  }
];
</script>

<template>
  <div>
    <div class="flex items-center gap-x-[30px]">
      <el-radio-group v-model="tableLayout">
        <el-radio-button label="fixed" />
        <el-radio-button label="auto" />
      </el-radio-group>

      <el-radio-group v-model="tableLayout">
        <!-- https://element-plus.org/en-US/component/radio.html#radio-button-group -->
        <el-radio label="fixed" />
        <el-radio label="auto" />
      </el-radio-group>

    </div>
    <pure-table :data="tableData" :columns="columns" :table-layout="tableLayout" />
  </div>
</template>
